<template>
  <div class="app-container">
    <wise-crud
      ref="wise-crud"
      :urls="urls"
      :fields="fields"
      :handle="handle"
      :filters="filters"
    >
      <template slot="outHandle">
        <el-col :span="3">
          <el-button
            v-permission="['superSysOpsAdmin', 'entAdmin']"
            type="primary"
            @click="handleAdd()"
            ><i class="el-icon-plus" />添加</el-button
          >
        </el-col>
      </template>
      <template v-slot:handle="slotProps" label-width="500px">
        <el-button
          type="primary"
          v-permission="['superSysOpsAdmin', 'entAdmin']"
          size="small"
          round
          @click.native.prevent="editHandle(slotProps.row)"
          >编辑
        </el-button>
        <el-button
          type="info"
          size="small"
          round
          @click.native.prevent="viewHandle(slotProps.row)"
          >查看
        </el-button>
        <el-button
          type="danger"
          v-permission="['superSysOpsAdmin', 'entAdmin']"
          size="small"
          round
          @click.native.prevent="removeHandle(slotProps.row)"
          >删除
        </el-button>
      </template>
    </wise-crud>
    <el-dialog
      ref="drawer"
      :title="title"
      :visible.sync="drawer"
      destroy-on-close
    >
      <div class="wise-form">
        <el-form
          ref="ruleForm"
          :model="object"
          :rules="rules"
          :validate-on-rule-change="false"
          label-width="130px"
          label-suffix=":"
        >
          <el-form-item label="生产计划名称" prop="namex">
            <el-input
              v-model="object.namex"
              placeholder="请输入生产计划名称"
              :maxlength="100"
              show-word-limit
              clearable
              autofocus
            />
          </el-form-item>
          <el-form-item label="备注" prop="welderNumber">
            <el-input
              v-model="object.descx"
              placeholder="请输入备注"
              :maxlength="100"
              show-word-limit
              clearable
              autofocus
            />
          </el-form-item>
          <div
            style="
              border: 1px rgb(205, 202, 202) solid;
              border-radius: 5px;
              padding: 25px;
            "
          >
            <div
              id="dividx"
              style="
                border: 1px rgb(205, 202, 202) solid;
                border-radius: 5px;
                padding: 25px;
              "
              v-for="(item, index) in object.repairList"
            >
              <el-form-item label="步骤名称" prop="bzname">
                <el-input
                  v-model="item.bzname"
                  placeholder="请输入步骤名称"
                  :maxlength="100"
                  show-word-limit
                  clearable
                  autofocus
                />
              </el-form-item>
              <el-form-item label="步骤说明" prop="">
                <el-input
                  v-model="item.bzdesc"
                  placeholder="请输入步骤说明"
                  :maxlength="100"
                  show-word-limit
                  clearable
                  autofocus
                />
              </el-form-item>
              <el-form-item label="用时小时" prop="welderNumber">
                <el-input-number
                  v-model="item.ys"
                  placeholder="请输入用时（小时）"
                  :maxlength="10"
                  show-word-limitclearable
                  autofocus
                />
                <el-button
                  style="margin-left: 20px"
                  v-if="index + 1 === object.repairList.length"
                  @click="addBuZhou()"
                  >增加步骤</el-button
                >
                <el-button
                  style="margin-left: 20px"
                  v-if="index + 1 != object.repairList.length"
                  @click="delBuZhou(index)"
                  >删除步骤</el-button
                >
              </el-form-item>
            </div>
          </div>
          <el-form-item style="margin-top: 10px">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      ref="drawer1"
      title="查看生产计划"
      :visible.sync="drawer1"
      destroy-on-close
    >
      <div v-if="drawer1" class="draw-body">
        <div class="wise-form">
          <el-form
            :validate-on-rule-change="false"
            label-width="130px"
            label-suffix=":"
          >
            <el-form-item label="生产计划名称" prop="namex">
              {{ object.namex }}
            </el-form-item>
            <el-form-item label="备注" prop="descx">
              {{ object.descx }}
            </el-form-item>
            <div
            style="
              border: 1px rgb(205, 202, 202) solid;
              border-radius: 5px;
              padding: 25px;
            "
          >
            <div
              id="dividx"
              style="
                border: 1px rgb(205, 202, 202) solid;
                border-radius: 5px;
                padding: 25px;
              "
              v-for="(item, index) in object.repairList"
            >

            <el-form-item label="步骤名称" prop="bzname">
                <el-input
                  v-model="item.bzname"
                  placeholder="请输入步骤名称"
                  :maxlength="100"
                  show-word-limit
                  clearable
                  autofocus
                />
              </el-form-item>
              <el-form-item label="步骤说明" prop="">
                <el-input
                  v-model="item.bzdesc"
                  placeholder="请输入步骤说明"
                  :maxlength="100"
                  show-word-limit
                  clearable
                  autofocus
                />
              </el-form-item>
              <el-form-item label="用时小时" prop="welderNumber">
                <el-input-number
                  v-model="item.ys"
                  placeholder="请输入用时（小时）"
                  :maxlength="10"
                  show-word-limitclearable
                  autofocus
                />
                </el-form-item>
            </div>
            </div>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from "@/components/Crud/wiseCrud";
import { postHandle } from "@/api";
import WiseFile from "@/components/Crud/components/wiseFile";
import WiseRegion from "@/components/Crud/components/wiseRegion";
import WiseDate from "@/components/Crud/components/wiseDate";
import FileType from "@/components/Crud/components/fileType";
import { setSpaceId } from "../../../../utils/auth";
export default {
  name: "ProviderManage",
  components: { FileType, WiseCrud, WiseRegion, WiseDate, WiseFile },
  data() {
    return {
      dqsj: new Date().getTime(),
      form: {
        region: "",
      },
      subView: false,
      craftsId: null,
      dialogVtheme: false,
      urls: {
        list: "/api/v1/welder-sbtx-second/repair-mode-comb/list",
        add: "/api/v1/welder-sbtx-second/repair-mode-comb/create",
        
        update:
          "/api/v1/welder-sbtx-second/repair-mode-comb/update/",
      },
      handle: ["filters"],
      fields: [
        { label: "序号", type: "index", use: ["table"] },

        {
          label: "生产计划名称",
          prop: "namex",
          type: "text",
          maxlength: 20,
          use: ["table"],
        },
        {
          label: "备注",
          prop: "descx",
          type: "text",
          maxlength: 20,
          use: ["table"],
        },

        {
          label: "创建时间",
          prop: "ct",
          type: "date",
          format: "YYYY-MM-DD HH:mm:ss",
          use: ["table"],
        },

        {
          label: "操作",
          type: "handle",
          use: ["table"],
          handle: [],
          tableWidth: 350,
        },
      ],

      drawer: false,
      drawer1: false,
      drawer2: false,
      drawer3: false,
      title: "添加生产计划",
      typeList: [],
      craftsInfoList: [],
      userList: [],
      object: {
        namex: "",
        spaceId: "",
        desc: "",
        cid: "",
        repairList: [
          {
            iid: "",
            name: "",
            bzdesc: "",
            ys: 0,
          },
        ],
      },
      rules: {
        namex: [
          { required: true, message: "请输入生产计划名称", trigger: "blur" },
        ],
      },
      fileList: [],
      themeObj: {
        id: null,
        code: "default",
      },
    };
  },
  computed: {
    spaceId() {
      return this.$store.getters.entSpaceId;
    },

    filters() {
      if (this.$store.state.user.project) {
        return [
          {
            field: "id",
            operator: "EQUALS",
            value: this.$store.state.user.project.id,
          },
        ];
      } else {
        return [];
      }
    },
  },
  mounted() {
    
  },
  methods: {
    handleAdd() {
      this.title = "添加生产计划";
      this.fileList = [];
      this.object = {
        namex: "",
        spaceId: "",
        descx: "",
        cid: "",
        repairList: [
          {
            iid: "",
            name: "",
            bzdesc: "",
            ys: 0,
          },
        ],
      };
      this.drawer = true;
      this.getCraftsInfoList();
      // this.getUserListList()
    },
    editHandle(row) {
      this.title = "编辑项目";
      
      this.object = {
        id: row.id,
        namex: row.namex,
        spaceId: row.spaceId,
        descx: row.descx,
        
        repairList: row.repairList
         
      };
      this.fileList = [];
     
      this.drawer = true;
    },
    viewHandle(row) {
      this.object = {
        id: row.id,
        namex: row.namex,
        spaceId: row.spaceId,
        descx: row.descx,
        
        repairList: row.repairList
         
      };
      this.drawer1 = true;
    },
    removeHandle(row) {
      this.$confirm("您确定要删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeById(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getObjectById(id) {
       
    },
    removeById(id) {
      postHandle(
        "/api/v1/welder-sbtx-second/repair-mode/remove/" + id,
        {}
      )
        .then((response) => {
          this.$message("删除成功");
          this.dialogVtheme = false;
          this.$refs["wise-crud"].handleSearch(1);
        })
        .catch((error) => {
          this.loading = false;
          const data = error.response.data;
          for (const key in data) {
            this.$message.error(this.$t(data[key]));
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.object['spaceId'] = this.spaceId
          let url;
          if (this.object.id) {
            url = this.urls.update + this.object.id;
          } else {
            url = this.urls.add;
          }
          postHandle(url, {
            obj: this.object,
          })
            .then((response) => {
              this.$message("操作成功");
              this.drawer = false;
              if (this.object.id) {
                this.$refs["wise-crud"].handleSearch(0);
              } else {
                this.$refs["wise-crud"].handleSearch(1);
              }
            })
            .catch((error) => {
              const data = error.response.data;
              for (const key in data) {
                this.$message.error(this.$t(key + "." + data[key]));
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    setValue(objVal) {
      if (objVal && objVal.length > 0) {
        objVal.forEach((item) => {
          this.$set(this.object, item.field, item.value);
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCraftsInfoList() {
      const req = {
        d: {
          page: {
            p: 1,
            ps: 9999,
          },
        },
      };
      postHandle("/api/v1/welder-sbtx-second/crafts-info-comb/list", req).then(
        (response) => {
          const data = response.result;
          this.craftsInfoList = data;
        }
      );
    },
    /* getUserListList() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-uac-second/user-information', req).then(response => {
          const data = response.result
          this.userList = data
        })
      },*/
    screenMonitor(row) {
     
        setSpaceId(row.spaceId);
        window.location.href = "/project";
     
    },
    setTheme(row) {
      this.themeObj.id = row.id;
      this.themeObj.code = row.code ? row.code : "default";
      this.dialogVtheme = true;
    },
    setThemeHandle() {
      postHandle(
        `/api/v1/welder-sbtx-second/repair-mode-comb/update-project-code/${this.themeObj.id}`,
        {
          d: {},
          obj: this.themeObj,
        }
      )
        .then((response) => {
          this.$message("操作成功");
          this.dialogVtheme = false;
          this.$refs["wise-crud"].handleSearch(1);
        })
        .catch((error) => {
          const data = error.response.data;
          for (const key in data) {
            this.$message.error(this.$t(key + "." + data[key]));
          }
        });
    },

    addBuZhou() {
      this.object.repairList.push({
        iid: "",
        name: "",
        bzdesc: "",
        ys: null,
      });
    },
    delBuZhou(index) {
      this.object.repairList.splice(index, 1);
    },
  },
};
</script>

<style>
.select-add .el-form-item {
  margin-bottom: 18px;
}
</style>
